<template>
  <div class="detail_top_wrapper">
    <div class="back_wrapper" style="display: flex;padding-left: 10px;max-width: 600px;margin: 0 auto;">
      <span @click="$router.back()" class = "el-icon-arrow-left" style="font-size: 25px;opacity: 0.6"></span>
    </div>
    <div class="src_wrapper">
      <div class="src" style="font-size: 40px;font-weight: bold;line-height: 80px;">{{word_data.src}}</div>
    </div>
    <div class="transh" style="display: flex;flex-direction: row-reverse;margin: 0 auto;padding: 10px;">
      <el-button circle class="el-icon-delete" style="font-size: 15px;" @click="deleteYes"></el-button>
    </div>
    <div class="tgt_wrapper" style="background-color: lightgray;padding-bottom: 10px;">
      <div class="tgt" style="font-size: 30px;font-weight: bold;line-height: 100px;">{{word_data.tgt}}</div>
      <div style="margin-bottom: 10px;"><span @click="dialogVisible = true" style="color: #2473fc">修改</span></div>
<!--      <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>-->

      <el-dialog title="修改翻译" :visible.sync="dialogVisible" width="30%" >
        <el-input clearable v-model = "word_data.tgt"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeFanyi">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {postRequest, deleteRequest} from "../../utils/api";
  import {strsutils} from "../../utils/strutils";
  let baseurl = strsutils.baseurl
  export default {
      name: "DetailTop",
      props: ['word_data'],
      data(){
        return{
          dialogVisible: false,
          input_tgt: ''
        }
      },
      mounted() {
        this.input_tgt = this.word_data.tgt
      },
      methods:{
        deleteYes(){
          let _this = this
          this.$confirm('此操作将删除该单词, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'customClass'
          }).then(() => {
            _this.deleteWord()
          })
        },
        deleteWord(){
          let _this = this
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          // console.debug('删除前cur_wordid：'+window.localStorage.getItem('cur_wordid'))
          deleteRequest(baseurl+'/word/'+window.localStorage.getItem('cur_wordid'), '').then(function (res) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
            loading.close()
            window.localStorage.setItem('cur_wordid', 0)
            _this.$router.replace('/see')
          }).catch(function (err) {
            console.debug('删除word失败'+err)
            loading.close()
          })
        },
        changeFanyi(){
          console.debug("修改翻译ff")
          this.dialogVisible = false
          let param = {id: this.word_data.id, tgt: this.word_data.tgt}
          postRequest(baseurl+'/changeFanyi', param).then(function (res) {
            console.debug(res.data+"修改翻译完成")
          }).catch(function (err) {
            console.debug("修改翻译失败")
          })
        }
      }
    }
</script>

<style>
  .detail_top_wrapper .el-dialog{margin: 0px auto;min-width: 330px;}
  .customClass{max-width: 300px;}
</style>

<style scoped>

</style>
